<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="./index2.css">
</head>
<body>
    <div id="box" v-cloak>
        <div class="nav">
            <div class="logo">
                <img src="https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMDUvYzE4ZDJlMmViMWExOTc4NzNjYTczOGFiNWZmMGRjNzEucG5n.png">
            </div>  
            <div class="navlist">
                <div>产品</div>
                <div>功能</div>
                <div>关于</div>
                <div>团队</div>
            </div>
        </div>
        <!--轮播图 -->
        <div>
            <el-carousel indicator-position="outside">
                <el-carousel-item v-for="(item,$index) in arr" :key="$index">
                  <div class="imgbox" :style="{backgroundImage:'url('+item.imgurl+')',backgroundSize:'100% 100%'}">
                     <div class="tabletext">
                        <div>{{item.text}}</div>
                        <div>{{item.content}}</div>
                     </div>
                  </div>
                </el-carousel-item>
            </el-carousel>
        </div>
        <!--  -->
        <div style="padding-top:100px;">   
            <titlebox title="产品介绍" inco="el-icon-discount" text="亲，本版本是最简单的单页式模板，不需要创建内页一般来说，
            只要半天就可以完成对这个模板的设定哦">
                <div style="padding: 60px 0;">
                    <img src="https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvYjU5YzY3YmYxOTZhNDc1ODE5MWU0MmY3NjY3MGNlYmEuanBn.jpg">
                </div>
            </titlebox>
        </div>
        <div style="padding-top: 40px;">
            <titlebox title="模板功能" inco="el-icon-table-lamp" text="这些文字都是可以根据您的需要自行更改的，所以不要怕和您的需要不一样哦.
            图片的话都没有具体的大小要求，合适就好，开心就好">
                <div style="padding:0px 80px;overflow: hidden;">
                    <div class="module_list" v-for="i in 6">
                        <div>

                        </div>
                    </div>
                </div>
            </titlebox>
        </div>
        <!--  -->
        <div class="bootme">
            <div class="content_me">
                <titlebox style="color: #fff;" title="关于我们" inco="el-icon-coin" text="起飞页不仅是一个方便快捷的构建网站的自助建站平台，更重要的是，我们为中国用户提供了更多贴心的服务：网站备案、自动备份、快速恢复以及网站代建服务。我们使用了国内和香港最好的网络和云服务器，确保您的网站能够快速完美的呈现在访客面前。">
                    <div style="text-align: center;color: #ff5100;font-size: 18px;">
                        起飞页自主建站平台
                    </div>
                </titlebox>
            </div>
        </div>
        <!--  -->
        <div class="td">
            <titlebox title="我们的团队" inco="el-icon-coin" text="介绍一下您的强大的团队吧。几行热情的自我介绍可以迅速的拉近您和访客的距离。">
                <div class="td_lb">
                    <template>
                        <el-carousel :interval="5000" arrow="always">
                          <el-carousel-item v-for="item in 2" :key="item">
                                <div class="td_lbdiv" v-for="i in arr2">
                                    <div class="td_lbdivimg"><img :src="i.imgurl" alt=""></div>
                                    <div class="td_lddivname" style="color: black;font-weight: bold;">{{i.name}}</div>
                                    <div class="td_lddivname">{{i.zy}}</div>
                                    <div class="td_lddivname">{{i.content}}</div>
                                </div>
                          </el-carousel-item>
                        </el-carousel>
                    </template>
                </div>
            </titlebox>
        </div>
        <!--  -->
        <div class="xs">
             <div class="xs_me">
                <titlebox style="color: #fff;" title="产品销售" inco="el-icon-coin" text="很少人会做第一个吃螃蟹的人，我们不妨避开让人尴尬的数据而展示一些客户愿意看的漂亮数据">
                    <div class="xs_mediv">
                        <div v-for="i in arr3">
                            <el-progress type="circle" :percentage="25"></el-progress>
                            <div>{{i.name}}</div>
                            
                        </div>
                    </div>
                </titlebox>
            </div>
        </div>
        <!--  -->
        <div class="xm">
            <titlebox title="项目展示" inco="el-icon-coin" text="一个没打过仗的军队很难有说服力，当然打了很多败仗的故事也不会增加任何说服力。所以说说您成功的项目经验吧，如果没有，也可以有哦。">
                <div class="xm_div">
                    <div class="xm_divnav"><div v-for="(i,$index) in arr4" :class="$index==index?'xmactive':''" @click="index=$index">{{i.text}} </div></div>
                    
                    <div class="xm_divtext" v-for="(i,$index) in arr4" v-show="$index==index">
                        <div v-for="i in 8"></div>
                    </div>
                </div> 
            </titlebox>
        </div>
        <!--  -->
        <div class="cpjg">
            <div class="cpjg_me">
                <titlebox style="color: #fff;" title="产品价格" inco="el-icon-coin" text="起飞页不仅是一个方便快捷的构建网站的自助建站平台，更重要的是，我们为中国用户提供了更多贴心的服务">
                    <div class="cpjg_div">
                       <div>
                           <div>基础版</div>
                           <div><span>￥99</span>/月</div>
                           <div>
                               <p>流量5G/每月</p>
                               <p>空间1G自动</p>
                               <p>备份每日自动备份</p>
                               <p>技术支持邮件/QQ/电话</p>
                           </div>
                           <div><div>联系客服</div></div>
                       </div>
                       <div>
                        <div>高级版</div>
                        <div><span>￥159</span>/月</div>
                        <div>
                            <p>流量5G/每月</p>
                            <p>空间1G自动</p>
                            <p>备份每日自动备份</p>
                            <p>技术支持邮件/QQ/电话</p>
                        </div>
                        <div><div>联系客服</div></div>
                    </div>
                    <div>
                        <div>终极版</div>
                        <div><span>￥299</span>/月</div>
                        <div>
                            <p>流量5G/每月</p>
                            <p>空间1G自动</p>
                            <p>备份每日自动备份</p>
                            <p>技术支持邮件/QQ/电话</p>
                        </div>
                        <div><div>联系客服</div></div>
                    </div>
                    </div> 
                </titlebox>
            </div>
        </div>
        <!--  -->
        <div class="wmfw">
            <titlebox title="我们的服务" inco="el-icon-coin" text="起飞页不仅是一个方便快捷的构建网站的自助建站平台，更重要的是，我们为中国用户提供了更多贴心的服务：网站备案、自动备份、快速恢复以及网站代建服务。
            我们使用了国内和香港最好的网络和云服务器，确保您的网站能够快速完美的呈现在访客面前。">
                <div class="wmfw_div">
                    <wmfwbox  inco="el-icon-s-grid" title="服 务 介 绍" text="応损捠捡换攳，攴朰朲朳枛朸桸桹桺奿妀。夲夳夵壱売壳圢圤圥圦圧！圩圪囡団囤囥咍咎，咐咑厺厼厽桻桼忝忞帄帇帉帊峢">
                    </wmfwbox>
                    <wmfwbox  inco="el-icon-s-grid" title="服 务 介 绍" text="応损捠捡换攳，攴朰朲朳枛朸桸桹桺奿妀。夲夳夵壱売壳圢圤圥圦圧！圩圪囡団囤囥咍咎，咐咑厺厼厽桻桼忝忞帄帇帉帊峢">
                    </wmfwbox>
                    <wmfwbox  inco="el-icon-s-grid" title="服 务 介 绍" text="応损捠捡换攳，攴朰朲朳枛朸桸桹桺奿妀。夲夳夵壱売壳圢圤圥圦圧！圩圪囡団囤囥咍咎，咐咑厺厼厽桻桼忝忞帄帇帉帊峢">
                    </wmfwbox>
                    <wmfwbox  inco="el-icon-s-grid" title="服 务 介 绍" text="応损捠捡换攳，攴朰朲朳枛朸桸桹桺奿妀。夲夳夵壱売壳圢圤圥圦圧！圩圪囡団囤囥咍咎，咐咑厺厼厽桻桼忝忞帄帇帉帊峢">
                    </wmfwbox>
                </div> 
            </titlebox>
        </div>
        <!--  -->
        <div class="khpj">
            <div class="khpj_me">
                <titlebox style="color: #fff;" title="客户评价" inco="el-icon-coin" text="起飞页不仅是一个方便快捷的构建网站的自助建站平台，更重要的是，我们为中国用户提供了更多贴心的服务：网站备案、自动备份、快速恢复以及网站代建服务。我们使用了国内和香港最好的网络和云服务器，确保您的网站能够快速完美的呈现在访客面前。">
                    <div class="khpj_div">
                        <template>
                            <el-carousel indicator-position="outside">
                              <el-carousel-item v-for="item in 2" :key="item">
                                  <div class="khpj_divimg">
                                      <img src="https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTYvMDcvOGY3OTQwZDBlZDFlYjM3NDIwNmMwMWEzMjA3ODY0MGItMTUweDE1MC5qcGc_p_p100_p_3D.jpg" alt="">
                                  </div>
                                  <div>
                                      
                                        起飞页不仅是一个方便快捷的构建网站的自助建站平台，更重要的是，我们为中国用户提供了更多贴心的服务：网站备案、自动备份、快速恢复以及网站代建服务。我们使用了国内和香港最好的网络和云服务器，确保您的网站能够快速完美的呈现在访客面前。
                                    <p> —— 西安某英语培训机构, 代理</p>   
                                  </div>
                              </el-carousel-item>
                            </el-carousel>
                          </template>
                    </div> 
                </titlebox>
            </div>
        </div>
        <!--  -->
        <div class="foot">
            <div class="footl">
                <div class="me_footl">
                    <titlebox title="联系我们" inco="el-icon-coin">
                        <div>
                            <el-input  placeholder="请输入内容"></el-input>
                            <el-input  placeholder="请输入内容"></el-input>
                            <textarea cols="25" rows="3"></textarea>
                            <div>提交</div>
                        </div>
                        
                    </titlebox>
                </div>
            </div>
            <div class="footr">
                <div>
                    <div class="me_footr">
                        <titlebox style="color: #fff;" title="关注我们" inco="el-icon-coin" text="起飞页不仅是一个方便快捷的构建网站的自助建站平台，更重要的是，我们为中国用户提供了更多贴心的服务：网站备案、自动备份、快速恢复以及网站代建服务。我们使用了国内和香港最好的网络和云服务器，确保您的网站能够快速完美的呈现在访客面前。">
                        </titlebox>
                    </div>
                </div>
            </div>
        </div>
        <!--  -->
    </div>
</body>
<script src="./vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./index2.js"></script>
<script>
    new Vue({
        el:"#box",
        data:{
            arr:[
                {
                    imgurl:'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTgvMTAvMDNkYTM3MTQ2YjA1YzM5MTM1YWFjYWE4YTdlZDNkZDguanBn.jpg',
                    text:'做一个精彩的站点',
                    content:'为情怀而干杯，告别朴素的重复和一望无际的平庸'
                },
                {
                    imgurl:'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvNzliN2NkY2QxNGRiMTRlOWNiNDk4ZjE3OTM4MTdkNjkuanBn.jpg',
                    text:'我在灯火阑珊处',
                    content:'起飞页是放飞梦想的地方，也是寻梦的地方'
                }
            ],
            arr2:[
                {
                    imgurl:'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvYmU3YTcyNzAzZjVjZDZjYzc3MmQ0N2E1Y2QyZGJjOTctNDAweDQwMC5qcGc_p_p100_p_3D.jpg',
                    name:'彭少宏',
                    content:'您可以双击这里或者点击编辑按钮来修改内容，您可以添加按钮图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。',
                    zy:'CEO总经理'
                },
                {
                    imgurl:'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvYTNkNDA0Mjg2MmVkNjE3Mzk0M2QwOTQ4M2M5NjM3NGMtNDAweDQwMC5qcGc_p_p100_p_3D.jpg',
                    name:'张义栋',
                    content:'您可以双击这里或者点击编辑按钮来修改内容，您可以添加按钮图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。',
                    zy:'工程师'
                },{
                    imgurl:'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvZmYxNDZkZjNiODBkMmE0M2FmNTZhYzY3Nzk3YWEwZDUtNDAweDQwMC5qcGc_p_p100_p_3D.jpg',
                    name:'郭思燕',
                    content:'您可以双击这里或者点击编辑按钮来修改内容，您可以添加按钮图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。',
                    zy:'客服代表'
                },{
                    imgurl:'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvYTI2NzI2YzFlMDJhM2ZiNjRlNWM0MmM0MzEwZWFlMzktNDAweDQwMC5qcGc_p_p100_p_3D.jpg',
                    name:'亚萍',
                    content:'您可以双击这里或者点击编辑按钮来修改内容，您可以添加按钮图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。',
                    zy:'客服代表',
                }
            ],
            arr3:[{
                name:'发 布 版 本',
            }, {name:'发 布 版 本',
            },{ name:'发 布 版 本',
            },{ name:'发 布 版 本',
            },],
            arr4:[{text:'活动策划 |'},{text:'画册设计 |'},{text:'电影宣传片制作 |'}],
            index:0,
            
            
        }
    })
</script>
</html>